<template>
  <el-upload class="upload" :action="getBaseURL() + '/upload'" :on-success="onSuccess" multiple :limit="1">
    <el-button type="primary">文件上传</el-button>
  </el-upload>
  <el-table :data="folder.files" @row-dblclick="download" @row-click="go" @row-contextmenu="menu">
    <el-table-column prop="name" label="文件名">
      <template #default="scope">
        <div v-if="scope.row && scope.row.isDirectory && scope.$index !== 0"
          style="display: flex; align-items: center;">
          <svg class="icon" width="20" height="20" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"
            data-v-042ca774>
            <path fill="currentColor"
              d="M128 192v640h768V320H485.76L357.504 192H128zm-32-64h287.872l128.384 128H928a32 32 0 0132 32v576a32 32 0 01-32 32H96a32 32 0 01-32-32V160a32 32 0 0132-32z" />
          </svg>
          <div class="over-text">{{ scope.row.name }}</div>
        </div>
        <div style="display: flex; align-items: center;" v-else-if="scope.row">
          <div class="over-text">{{ scope.row.name }}</div>
        </div>
      </template>
    </el-table-column>

    <el-table-column prop="lastModified" label="最后修改" />
  </el-table>
  <el-dialog v-model="dialogVisible" title="文件下载" width="50%" :before-close="handleClose">
    <span>确认下载 [{{ rowData.name }}]</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <a :href="downloadUri" class="href-text">
          <el-button type="primary" @click="dialogVisible = false">
            下载
          </el-button>
        </a>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { list } from "@/api";
import { getBaseURL } from "@/api/env";
import { onMounted, ref, watch } from "@vue/runtime-core";
import { useRoute, useRouter } from "vue-router";

const folder = ref({ path: '', files: [{ name: '..', isDirectory: true, lastModified: '' }], separator: '' })

const reset = (): void => {
  folder.value = { path: '', files: [{ name: '..', isDirectory: true, lastModified: '' }], separator: '' }
}

const formatDirectory = (_row: any, _column: any, cellValue: boolean) => {
  return cellValue ? '文件夹' : '文件'
}

const onSuccess = async () => {
  getFolder({ path: folder.value.path })
}

let timer: any = null
const router = useRouter()
const go = (row: any, _column: any, _event: any) => {
  clearTimeout(timer)
  timer = setTimeout(() => {
    let path = ''
    if (row.isDirectory) {
      switch (row.name) {
        case '..':
          let tmp: string[] = folder.value.path.split(folder.value.separator)
          tmp.pop()
          path = tmp.join(folder.value.separator)
          if (tmp.length == 1) {
            path = tmp + folder.value.separator
          }
          router.replace({ path: '/', query: { path } })
          break;
        default:
          path = folder.value.path + folder.value.separator + row.name
          router.replace({ path: '/', query: { path } })
          break;
      }
    }
  }, 300);
}

const menu = (row: any, column: any, event: any) => {
  console.log(row)
}
const dialogVisible = ref(false)

const rowData = ref({ name: '', isDirectory: false, lastModified: '' })

const downloadUri = ref('')

const download = (row: { name: string, isDirectory: boolean, lastModified: string }, _column: any, _event: any) => {
  clearTimeout(timer)
  if (row.name === '..') {
    return false;
  }
  rowData.value = row;
  downloadUri.value = getBaseURL() + `/download?path=${encodeURIComponent(folder.value.path + folder.value.separator + row.name)}`
  dialogVisible.value = true
}

const handleClose = () => {
  dialogVisible.value = false
  rowData.value = { name: '', isDirectory: false, lastModified: '' }
}

const getFolder = async (params = {}) => {
  reset()
  const res = await list(params)
  folder.value.path = res.currentPath
  folder.value.separator = res.separator
  folder.value.files = folder.value.files.concat(res.files)
}

const route = useRoute()

watch(() => route.query, newQuery => {
  folder.value.path = newQuery.path as string
  getFolder({ path: folder.value.path })
})

onMounted(() => getFolder({ path: route.query.path }))
</script>

<style lang="less" scoped>
body {
  padding-bottom: 20px;
}



.over-text {
  padding: 0 5px;
  height: 23px;
  width: 244px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.href-text {
  text-decoration: none;
  color: white;
  display: inline-block;
  padding-left: 10px;
}

.el-table {
  user-select: none;
}

.el-table-column {
  cursor: pointer;
}
</style>